<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">

</head>
<body>
	<div class="container">
		<div>
			<!-- 图片 -->
			<a href="/"> <img alt="" src="/resource/pic/logo-admin.jpg" height="50" width="100" ></a> 
			<hr>
		</div>
		<div class="row">
			<div class="col-md-6">
				
				<!-- 错误信息提示 -->
				<span id="errorMsg" style="color:red"></span>
				<form action="" method="post" id="loginForm">
				
					<div class="form-group">
						<label for="username">用户名：</label> 
						<input name="username" class="form-control"  id="username" />
					</div>
					
					<div class="form-group">
						<label for="password">密码：</label>
						<input name="password" class="form-control"  id="password" />
					</div>
					
					<div class="form-group">
						<input type="reset" onclick="toReg()" value="注册" class="btn btn-primary"></button>
						<input type="button" onclick="login()"  value="登录" class="btn btn-primary"></button>
					</div>
				</form>
			</div>
			<!-- 加上图片 -->
			<div class="col-md-6">
				<img alt="" src="/resource/pic/bg-reg.jpg" height="300">
			</div>
		</div>
	</div>
	
</body>
<script type="text/javascript">
	//跳转到注册页面
	function toReg(){
		location="/user/toRegister";
	}

	//登录操作
	function login(){
		//使用ajax进行登录操作
		$.post(
			"/user/login",
			$("#loginForm").serialize(),
			function(result){
				if(result){
					//登录成功
					location="/";
				}else{
					//登录失败
					$("#errorMsg").html("用户名或密码错误！");
				}
			}
		)
	}
		
</script>
</html>